<html xmlns:th="http://www.thymeleaf.org">
	<head>
	<meta charset="utf-8">
	<link href="../style/main_table.css" th:href="@{/assets/style/main_table.css}" type=text/css rel=stylesheet>
    <script src="../../js/vue.min.js" th:src="@{/assets/js/vue.min.js}"></script>
	 <script src="../../js/axios.js" th:src="@{/assets/js/axios.js}"></script>
	 <script src="../../js/jquery.js" th:src="@{/assets/js/jquery.js}"></script>
    </head>

<body>

        <table width="100%"   border="0"   align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td width="6"><img src="../images/main_01.gif" th:src="@{/assets/images/main_01.gif}" width="6" height="6"/></td>
          <td width="981" bgcolor="#A3A3A3"><img src="../images/main_02.gif" th:src="@{/assets/images/main_02.gif}" width="560" height="6"></td>
          <td width="10"><img src="../images/main_03.gif" th:src="@{/assets/images/main_03.gif}" width="6" height="6"/></td>
        </tr>
        <tr >
          <td colspan="3"   ><table width="100%"  border="0" align="center" cellpadding="1" cellspacing="1">
              <tr>
                <td background="../images/main_title_bg1.gif" th:background="@{/assets/images/main_title_bg1.gif}"><table width="100%"  border="0" cellspacing="1" cellpadding="1">
                  <tr>
                    <td width="1%"><img src="../images/dot9.gif" th:src="@{/assets/images/dot9.gif}" width="14" height="14"/></td>
                    <td width="99%">合同信息输入springboot </td>
                  </tr>
                </table></td>
              </tr>
              
              <tr><td align=center height=500>
             
 <!--Ҫ��������ص�-->
<div id="app2">
<table>

	<tr>
		<td nowrap  height="3" width="76"><strong>合同号</strong></td>
		<td  nowrap height="3" width="197">
			<input name="hetong_id" size="12"   v-model="hetong_id"/></td>
		<td  nowrap height="3" width="77"><b>合同名称</b></td>
		<td  nowrap height="3" width="258">
			<input name="name" size="12" v-model="name"/></td>
	</tr>
	<tr>
		<td  nowrap height="34" width="76"><strong><span lang="en-us">&nbsp;&nbsp;&nbsp;
		</span>房屋</strong></td>
		<td  nowrap height="34" width="197">
			  <!--������qibie_id��Ӧ���Ǻ�ͬvo�е�qibie_id�󶨵�Ҳ����-->
		       <select  v-model="house_id">  
				<option value="">---请选择---</option> 
			  <!--������qibieid��Ӧ�����ڱ�vo�е�qibieid����Ϊ�Ǵ��ڱ��vo����json����-->
	        	<option v-for="option in houselist" v-bind:value="option.id">
	        	  {{option.name}}
	        	</option>	
			 </select>
				
		</td>
		<td  nowrap height="34" width="77"><strong>单元</strong></td>
		<td  nowrap height="34" width="258">
		      <select v-model="unit_id">
				  <option value="">---请选择---</option> 
                	<option v-for="option in unitlist" v-bind:value="option.id">
                	 {{option.name}}
                	</option>			
              </select>
       </td>

	</tr>
	<tr>
		<td  nowrap height="17" width="76"><strong><span lang="en-us">&nbsp;&nbsp;&nbsp;
		</span>楼区</strong></td>
		<td  nowrap height="17" width="197">
		
		     <select v-model="location_id">
				 <option value="">---请选择---</option> 
			   <option v-for="option in locationlist" v-bind:value="option.id">
			    {{option.name}}
			   </option>
			  </select>	
		
		
		
		
		
		
		</td>
		<!-- <td  nowrap height="17" width="77"><strong>���(M2)</strong></td>
		<td  nowrap height="17" width="258">
			<input name="mianji" size="12" v-model="mianji"/></td>
	</tr>
	<tr>
		<td  nowrap height="16" width="76"><strong><span lang="en-us">&nbsp;&nbsp;&nbsp;
		</span>��ַ</strong></td>
		<td nowrap  height="16" width="197">
			<input name="dizhi" size="12" v-model="dizhi"/></td> -->
		<td nowrap  height="16" width="77"><strong>业主姓名</strong></td>
		<td  nowrap height="16" width="258">
			<input name="owner_name" size="12"  v-model="owner_name"/></td>
	</tr>
	<tr>
		<td  nowrap height="1" width="76"><strong>业主电话</strong></td>
		<td  nowrap height="1" width="197">
			<input name="owner_phone" size="12"  v-model="owner_phone"/></td>
		<td  nowrap height="1" width="77"></td>
		<td  nowrap height="1" width="258"></td>
	</tr>
	<tr>
		<td   align=center  nowrap height="7" width="608" colspan="4">
		<input type="button" value="提交表单" @click="submitfun()" />
		<input type="button" value="返回主页面" onclick="window.location='/test/hetongmanage'" /> </td>
		

		</tr>
</table>
</div>

        
              
          </table></td>
        </tr>
        <tr>
          <td><img src="../images/main_05.gif" th:src="@{/assets/images/main_05.gif}" width="6" height="6"/></td>
          <td bgcolor="#A3A3A3"><img src="../images/main_06.gif" th:src="@{/assets/images/main_06.gif}" width="560" height="6"/></td>
          <td><img src="../images/main_07.gif" th:src="@{/assets/images/main_07.gif}" width="6" height="6"/></td>
        </tr>
      </table>
</body>
</html>






<script>
        var app1=new Vue({
            el:'#app2',
            data:{
                 hetong_id:'',
				 name:'',
				 house_id:'',
				 unit_id:'',
				 location_id:'',
				 owner_name:'',
				 owner_phone:'',
				 houselist:[],
				 unitlist:[],
				 locationlist:[],
            },
            
			
			created: function (){
			    this.gethouseList();
			    this.getunitList();
				this.getlocationList();
			},
			
			
			
			//qibiename: ���������ʽ��name='+this.name+'&sex='+this.sex+'&age='+this.age ���ֺͿ������ж���vo����������һ�£����Զ���ֵ������
            methods: {  
				gethouseList:function () {
				  axios.get('http://localhost:8087/test/HouseControl/queryHouse').
					then(function (response){
				        var arr=response.data; //��ȡ��̨json����
				        app1.houselist=arr; //��json���ݸ���vue�б���quyulist
				    }).catch(function (error) {
				          alert(error);
				    })
				},
				
				getunitList:function () {
				  axios.get('http://localhost:8087/test/UnitControl/queryUnit').
					then(function (response){
				        var arr=response.data; //��ȡ��̨json����
				        app1.unitlist=arr; //��json���ݸ���vue�б���quyulist
				    }).catch(function (error) {
				          alert(error);
				    })
				},
				
				
				
				getlocationList:function () {
				  axios.get('http://localhost:8087/test/LocationControl/queryLocation').
					then(function (response){
				        var arr=response.data; //��ȡ��̨json����
				        app1.locationlist=arr; //��json���ݸ���vue�б���quyulist
				    }).catch(function (error) {
				          alert(error);
				    })
				},
				
		         submitfun:function () {
					axios({
					    method: 'POST',
					    url: 'http://localhost:8087/test/HetongControl/addHetong',
					    params: { //����ֶ����ݣ�����д������
					        'hetong_id': this.hetong_id,
							'name': this.name,
							'house_id': this.house_id,
							'unit_id': this.unit_id,
							'location_id': this.location_id,
							'owner_name': this.owner_name,
						    'owner_phone': this.owner_phone,
					       	},
					    headers: {
					      'Content-Type': 'application/x-www-form-urlencoded'
					    }
					} ).then(function (response) {
							window.location.href="/test/hetongmanage";
						}).catch(function (error) {
						})
				},
	
              }
        });
    </script>

